<template>
  <zero-vxe-grid v-loading="loading">
    <div slot="header">
      <!-- 查询条件-->
      <el-collapse-transition>
        <div v-show="viewModuleOptions.showSearch">
          <vxe-form ref="queryForm" :data="viewModuleOptions.searchForm" title-align="right">
            <vxe-form-item title="IP地址" field="ip" :item-render="{}">
              <template #default="{ data }">
                <vxe-input max-length="50" v-model="data.ip" showWordCount clearable placeholder="请输入IP地址"/>
              </template>
            </vxe-form-item>

            <vxe-form-item title="标题" field="title" :item-render="{}">
              <template #default="{ data }">
                <vxe-input max-length="50" v-model="data.title" showWordCount clearable placeholder="请输入标题"/>
              </template>
            </vxe-form-item>
            <vxe-form-item title="用户账号" field="account" :item-render="{}">
              <template #default="{ data }">
                <vxe-input max-length="50" v-model="data.account" showWordCount clearable placeholder="请输入用户账号"/>
              </template>
            </vxe-form-item>

            <vxe-form-item title="日志等级" field="level" :item-render="{}">
              <template #default="{ data }">
                <vxe-select v-model="data.level" placeholder="请选择日志等级" clearable>
                  <vxe-option v-for="dict in dict.type.log_level" :key="dict.value" :label="dict.label"
                              :value="dict.value"></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>

            <vxe-form-item title="操作日期" field="createTime" :item-render="{}">
              <template #default="{ data }">
                <el-date-picker v-model="data.createTime" style="width: 360px" value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetimerange" range-separator="-" start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                :picker-options="viewModuleOptions.pickerOptions"
                                :editable="false"/>
              </template>
            </vxe-form-item>
            <vxe-form-item>
              <vxe-button content="搜索" round @click="searchSubmit" status="primary"/>
              <vxe-button content="重置" round @click="searchResetForm"/>
            </vxe-form-item>
          </vxe-form>
        </div>
      </el-collapse-transition>
    </div>

    <div slot="main">
      <!-- 表单-->
      <vxe-grid v-bind="viewModuleOptions" :ref="viewModuleOptions.ref" v-on="viewModuleOptions.fns">
        <template #buttons>
        </template>

        <template #level="{ row }">
          <dict-tag :options="dict.type.log_level" :value="row.level"/>
        </template>
        <template #tools>
          <vxe-button :title="viewModuleOptions.showSearch ? '隐藏搜索' : '显示搜索'" @click="showOrHideClick"
                      icon="vxe-icon-search" circle/>
          <vxe-button :title="viewModuleOptions.isFullscreen ? '还原' : '全屏'" @click="toggleIsFullscreen"
                      class="tool-btn"
                      :icon="viewModuleOptions.isFullscreen ? 'vxe-icon-minimize' : 'vxe-icon-fullscreen'" circle/>
        </template>

        <template #operation="{ row }">
          <vxe-button mode="text" status="primary" content="详情" @click="initDialog({ref:zeroDetailsRef,row:row})"></vxe-button>
        </template>
      </vxe-grid>

      <!-- 详细 -->
      <zero-details :ref="zeroDetailsRef"
                    :dictType="dict.type"/>
    </div>
  </zero-vxe-grid>
</template>

<script>

import viewModule from '@/mixins/vxe-grid.js'; // 公共js
import zeroDetails from './components/details.vue'; // 公共js

export default {
  name: "operLog",
  dicts: ['log_level'],
  mixins: [viewModule],
  components: {zeroDetails},
  data() {
    return {
      zeroDetailsRef: 'zeroDetailsRef',
      viewModuleOptions: {
        dataUrl: '/sysLog/pageList',
        //列动态定义
        columns: [
          {field: 'title', title: '标题', resizable: true},
          {field: 'operation', title: '操作', resizable: true},
          {field: 'account', title: '用户账号', resizable: true},
          {field: 'ip', title: 'IP地址', resizable: true},
          {field: 'loginLocation', title: '操作地点', resizable: true},
          {field: 'level', title: '日志等级', slots: {default: 'level'}},
          {field: 'costTime', title: '消耗时间（毫秒）', sortable: true},
          {field: 'createTime', title: '操作日期', sortable: true, resizable: true},
          {title: '操作', width: 100, slots: {default: 'operation'}}
        ]
      }
    };
  },
  watch: {
    //时间筛选特殊处理，重置createTime时也将根据这个字段衍生出来的字段置为null
    'viewModuleOptions.searchForm.createTime': function (val) {
      this.viewModuleOptions.searchForm.startCreateTime = val ? val[0] : null
      this.viewModuleOptions.searchForm.endCreateTime = val ? val[1] : null
    }
  }
};
</script>
